<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;

      position: absolute;
      left: 0;
      top: 0;

      transition: all 1s linear;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;

      position: absolute;

      left: 500px;
      top: 500px;
      transition: all 1s linear;
    }
  </style>
</head>
<body>

  <div draggable="true"></div>  
  <!-- 拖拽着的 -->
  <p></p>
  <!-- 拖完以后放下的  -->
   <script>
    /* 
        // 在浏览器中发生了 拖拽行为的事件 就是 拖拽事件
        // 会关联两个元素  
        // 1.  被拖拽的元素    
        // 2.  拖拽到的元素 (放下 )  拖放 

        // 元素 需要被拖拽才可以触发 
        // 1.  被拖拽的元素  需要设置 draggable = true



        // 拖拽元素  

        // 1. 开始拖拽
        // dragstart
        // 2. 拖拽移动 
        // drag
        // 3. 拖拽结束

        // dragend


        // 拖放元素
        // 1. 被拖拽元素进入拖放元素 触发  光标一进来就触发

        // dragenter

        // 2. 被拖拽元素离开拖放放元素 触发  光标一离开就触发
        // dragleave
        // 3 . 被拖拽元素完全进入拖放元素的范围 
        // dragover

        // 4. 被拖拽元素放手在 拖放元素上 触发 

        // drop
        // 需要在dragover 事件内阻止默认行为 
        // return false;  就是阻止默认行为的一种方法  

        //因为  drop 受 dropover 影响  
        所以  dropover 也需要阻止默认行为
    
    
    
    
    */
        var divEle = document.querySelector('div');
        var pEle = document.querySelector('p');


        // divEle.ondragstart = function(){
        //     // 开始拖拽
        //     console.log('开始拖拽');
        // }


        // divEle.ondragstart = function(){
        //     // 开始拖拽
        //     console.log('开始拖拽');
        // }

        // divEle.ondrag = function(){
        //     // 开始拖拽
        //     console.log('拖拽走');
        // }

        // divEle.ondragend = function(){
        //     // 开始拖拽
        //     console.log('转身就是一辈子');
        // }


        // pEle.ondragenter = function(){
        //     console.log('把它推荐来了 ');
        // }


        // pEle.ondragleave = function(){
        //     console.log('把它推荐走了 ');
        // }

        pEle.ondragover = function(){
            return false;  // 阻止默认行为
            // 好让dragover 不去影响  drop 
        }

        pEle.ondrop = function(){
            console.log('松手开始交换两个方块的位置');
            // 设置一个变量 获取 div 的位置 left  top 
            var left = window.getComputedStyle(divEle).left;
            var top  = window.getComputedStyle(divEle).top;
            //拿到 p 的位置 left  top
            divEle.style.left = window.getComputedStyle(pEle).left;
            divEle.style.top = window.getComputedStyle(pEle).top;
            // 将p的给div 
            // div的给p

            pEle.style.left = left;
            pEle.style.top = top;
        }

   </script>
</body>
</html>